<template>
    <div>
        <el-row>
            <component :is="content"></component>
            <el-col :span="20">
                <h2 class="warranty-title">险种管理</h2>
                <el-dialog
                        title="添加保单"
                        :visible.sync="show"
                        width="80%"
                        center>
                    <el-form ref="form" label-width="80px">
                        <el-form-item label="险种名">
                            <el-input v-model="InsuranceName"></el-input>
                        </el-form-item>
                        <el-form-item label="险种单价">
                            <el-input v-model="InsurancePrice"></el-input>
                        </el-form-item>
                        <el-form-item label="险种详情">
                            <el-input v-model="InsuranceInfo"></el-input>
                        </el-form-item>
                    </el-form>
                    <el-button type="primary" size="mini" style="float: right;margin-left: 10px" @click="closeAdd">取消</el-button>
                    <el-button type="primary" size="mini" style="float: right;margin-left: 10px" @click="AddInsuranceInfo">添加</el-button>
                </el-dialog>
                <div style="float:left">
                    <span>险种名：</span>
                    <el-input v-model="insuranceName" style="width: 200px;margin-left: 20px;margin-right: 10px;"></el-input>
                    <el-button type="primary" icon="el-icon-search" @click="searchInsurance">搜索</el-button>
                </div>
                <el-button type="primary" style="float: right;margin-left:18px" @click="AddInsurance">新增险种</el-button>
    <el-table
            :data="tableData"
            border
    >
        <el-table-column
                prop="iid"
                label="险种编号"
        >
        </el-table-column>
        <el-table-column
                prop="iname"
                label="险种名"
        >
        </el-table-column>
        <el-table-column
                prop="iprice"
                label="险种价格"
        >
        </el-table-column>
        <el-table-column
                prop="iinfo"
                label="险种详情"
        >
        </el-table-column>
        <el-table-column
                prop="iexpire"
                label="险种状态"
        >
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
        >
            <template slot-scope="scope">
                <el-button @click="editInsurance(scope.row)" type="primary" size="small">修改此险种状态</el-button>
                <el-button type="primary" size="small" @click="deleteInsurance(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import NavMenu from "../components/NavMenu";
    export default {
        name:'InsuranceManage',
        data(){
            return{
                InsuranceName:'',
                InsuranceInfo:'',
                InsurancePrice:'',
                insuranceName:'',
                content:NavMenu,
                tableData:[],
                currentPage:1,
                total:10,
                pageSize:3,
                show:false,
            }
        },
        mounted() {
            this.init()
        },
        methods:{
            init(){
                this.$axios.get("api/getAllInsurance").then(
                    r=>{
                        this.tableData=r.data
                    }
                )
            },
            searchInsurance(){
              this.$axios.get("/api/insuranceTypeList/"+this.currentPage+"/"+this.pageSize+"/"+this.insuranceName).then(
                  r=>{
                      console.log(r.data)
                      this.tableData=r.data.list
                      this.total=r.data.total
                  }
              )
            },
            AddInsurance(){
                this.show=true
            },
            closeAdd(){
                this.show=false
            },
            AddInsuranceInfo(){
                this.$axios.get("api/addInsurance/"+this.InsuranceName+"/"+this.InsurancePrice+"/"+this.InsuranceInfo).then(
                    r=>{
                        if (r.data == 200) {
                            this.$message({
                                message: '添加成功',
                                type: 'success'
                            });
                            this.init()
                        } else {
                            this.$message({
                                message: '添加失败',
                                type: 'error'
                            });
                        }
                    })
            },
            deleteInsurance(row){
                this.iid=row.iid
                this.$axios.delete("api/deleteInsurance/"+this.iid).then(
               r=>{
                   if (r.data == 200) {
                       this.$message({
                           message: '删除成功',
                           type: 'success'
                       });
                       this.init()
                   } else {
                       this.$message({
                           message: '删除失败',
                           type: 'error'
                       });
                   }

               }                )

            },
            editInsurance(row){
                this.iid=row.iid
                this.$axios.get("api/editInsurance/"+this.iid).then(
                    r=>{
                        if (r.data == 200) {
                            this.$message({
                                message: '修改成功',
                                type: 'success'
                            });
                            this.init()
                        } else {
                            this.$message({
                                message: '修改失败',
                                type: 'error'
                            });
                        }

                    }
                )

            }
        }
    }
</script>

<style scoped>

</style>